<html>


<style type="text/css">
    body {
        width: 96%;
        margin: auto;
        font-family: 'trebuchet MS', 'Lucida sans', Arial;
        font-size: 14px;
        color: #444;
    }

    table {
        *border-collapse: collapse; /* IE7 and lower */
        border-spacing: 0;
        width: 100%;

    }

    .bordered {
        border: solid #ccc 1px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 1px 1px #ccc;
        -moz-box-shadow: 0 1px 1px #ccc;
        box-shadow: 0 1px 1px #ccc;
    }

    .bordered tr:hover {
        background: #fbf8e9;
        -o-transition: all 0.1s ease-in-out;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

    .bordered td, .bordered th {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 10px;
        text-align: center;
    }

    .bordered th {
        background-color: #dce9f9;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
        background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
        background-image: linear-gradient(top, #ebf3fc, #dce9f9);
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
        border-top: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    }

    .bordered td:first-child, .bordered th:first-child {
        border-left: none;
    }

    .bordered th:first-child {
        -moz-border-radius: 6px 0 0 0;
        -webkit-border-radius: 6px 0 0 0;
        border-radius: 6px 0 0 0;
    }

    .bordered th:last-child {
        -moz-border-radius: 0 6px 0 0;
        -webkit-border-radius: 0 6px 0 0;
        border-radius: 0 6px 0 0;
    }

    .bordered th:only-child {
        -moz-border-radius: 6px 6px 0 0;
        -webkit-border-radius: 6px 6px 0 0;
        border-radius: 6px 6px 0 0;
    }

    .bordered tr:last-child td:first-child {
        -moz-border-radius: 0 0 0 6px;
        -webkit-border-radius: 0 0 0 6px;
        border-radius: 0 0 0 6px;
    }

    .bordered tr:last-child td:last-child {
        -moz-border-radius: 0 0 6px 0;
        -webkit-border-radius: 0 0 6px 0;
        border-radius: 0 0 6px 0;
    }
</style>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>日志分析</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
</head>

<body>
<div class="bread_crub">
    日志管理 > 日志概览 > {{ data.log_name }}
    <form class="news_filter_form">
        <input type="text" placeholder="站点日志名称" name="keywords" class="input_txt">
        <input type="submit" value="切 换" class="input_sub">
        <input type="hidden" name="log_name" value="{{ data.log_name }}">
        {#        <input type="hidden" value="{{ data.hours_time }}" name="hours_time">#}
        {#        <input type="hidden" value="{{ data.hours_data }}" name="hours_data">#}
        {#        <input type="hidden" value="{{ data.minutes_time }}" name="minutes_time">#}
        {#        <input type="hidden" value="{{ data.minutes_data }}" name="minutes_data">#}
    </form>
</div>
<div align="center">
    <table class="bordered">
        <tr>
            <th colspan="3"><strong>站点日志名称</strong></th>
            <td colspan="2"><strong>{{ data.log_name }}</strong></td>
            <td colspan="1"><strong><a href="{{ url_for('admin.log_details') }}?log_name={{ data.log_name }}">点击跳转日志详情</a></strong></td>
        </tr>
        <tr>
            <th><strong>访问量(PV)</strong></th>
            <th><strong>访客量(UV)</strong></th>
            <th><strong>IP量(IV)</strong></th>
            <th><strong>每秒请求数（峰值）</strong></th>
            <th><strong>峰值时间点</strong></th>
            <th><strong>每秒请求数（均值）</strong></th>
        </tr>
        <tr>
            <td><strong>{{ data.pv_count }}</strong></td>
            <td><strong>{{ data.uv_count }}</strong></td>
            <td><strong>{{ data.iv_count }}</strong></td>
            <td><strong>{{ data.max_second_requests }}</strong></td>
            <td><strong>{{ data.peak_time }}</strong></td>
            <td><strong>{{ data.avg_second_requests }}</strong></td>
        </tr>
    </table>

    <br>

    <table class="bordered">
        <tr>
            <td>
                <div id="hoursChart" style="height:400px; width: 750px;"></div>
            </td>
            <td>
                <div id="minutesChart" style="height:400px; width: 750px;"></div>
            </td>
        </tr>
    </table>

    <br>

    <table class="bordered">
        <tr>
            <td>
                <div id="methodChart" style="height:400px; width: 750px;"></div>
            </td>
            <td>
                <div id="statusChart" style="height:400px; width: 750px;"></div>
            </td>
        </tr>
    </table>

    <br>

    <table class="bordered">
        <tr>
            <th colspan="10"><strong>接口访问量 TOP 10</strong></th>
        </tr>
        <tr>
            <th colspan="6"><strong>请求接口</strong></th>
            <th><strong>访问量</strong></th>
            <th><strong>百分比</strong></th>
            <th><strong>每秒请求数（峰值）</strong></th>
            <th><strong>峰值时间点</strong></th>
        </tr>

        {% for record in data.records_list %}
            <tr>
                <td colspan="6"><strong>{{ record[0] }}</strong></td>
                <td><strong>{{ record[1] }}</strong></td>
                <td><strong>{{ record[2] }}</strong></td>
                <td><strong>{{ record[3] }}</strong></td>
                <td><strong>{{ record[4] }}</strong></td>
            </tr>
        {% endfor %}
    </table>

</div>

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    require(
        [
            'echarts',
            'echarts/theme/macarons',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/scatter',
            'echarts/chart/pie',
            'echarts/chart/funnel'
        ],
        function (ec, theme) {
            var hoursChart = ec.init(document.getElementById('hoursChart'), theme);
            var hoursOption = {
                title: {
                    text: '近一日每小时请求数',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['请求数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: false},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        name: '时间(时)',
                        type: 'category',
                        boundaryGap: false,
                        data: ['2019-09-02 16:00:00', '2019-09-02 17:00:00', '2019-09-02 18:00:00', '2019-09-02 19:00:00', '2019-09-02 20:00:00', '2019-09-02 21:00:00', '2019-09-02 22:00:00', '2019-09-02 23:00:00', '2019-09-03 00:00:00', '2019-09-03 01:00:00', '2019-09-03 02:00:00', '2019-09-03 03:00:00', '2019-09-03 04:00:00', '2019-09-03 05:00:00', '2019-09-03 06:00:00', '2019-09-03 07:00:00', '2019-09-03 08:00:00', '2019-09-03 09:00:00', '2019-09-03 10:00:00', '2019-09-03 11:00:00', '2019-09-03 12:00:00', '2019-09-03 13:00:00', '2019-09-03 14:00:00', '2019-09-03 15:00:00']
                    }
                ],
                yAxis: [
                    {
                        name: '请求数',
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '请求数',
                        type: 'line',
                        data: [1690, 1646, 288, 264, 262, 266, 266, 256, 258, 268, 262, 266, 260, 266, 266, 262, 262, 670, 700, 422, 18710, 18828, 394, 586]
                        ,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            hoursChart.setOption(hoursOption);

            var minuteChart = ec.init(document.getElementById('minutesChart'), theme);
            var minuteOption = {
                title: {
                    text: '近一小时每分钟请求数',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['请求数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: false},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        name: '时间(分)',
                        type: 'category',
                        boundaryGap: false,
                        data: ['2019-09-03 15:12:00', '2019-09-03 15:13:00', '2019-09-03 15:14:00', '2019-09-03 15:15:00', '2019-09-03 15:16:00', '2019-09-03 15:17:00', '2019-09-03 15:18:00', '2019-09-03 15:19:00', '2019-09-03 15:20:00', '2019-09-03 15:21:00', '2019-09-03 15:22:00', '2019-09-03 15:23:00', '2019-09-03 15:24:00', '2019-09-03 15:25:00', '2019-09-03 15:26:00', '2019-09-03 15:27:00', '2019-09-03 15:28:00', '2019-09-03 15:29:00', '2019-09-03 15:30:00', '2019-09-03 15:31:00', '2019-09-03 15:32:00', '2019-09-03 15:33:00', '2019-09-03 15:34:00', '2019-09-03 15:35:00', '2019-09-03 15:36:00', '2019-09-03 15:37:00', '2019-09-03 15:38:00', '2019-09-03 15:39:00', '2019-09-03 15:40:00', '2019-09-03 15:41:00', '2019-09-03 15:42:00', '2019-09-03 15:43:00', '2019-09-03 15:44:00', '2019-09-03 15:45:00', '2019-09-03 15:46:00', '2019-09-03 15:47:00', '2019-09-03 15:48:00', '2019-09-03 15:49:00', '2019-09-03 15:50:00', '2019-09-03 15:51:00', '2019-09-03 15:52:00', '2019-09-03 15:53:00', '2019-09-03 15:54:00', '2019-09-03 15:55:00', '2019-09-03 15:56:00', '2019-09-03 15:57:00', '2019-09-03 15:58:00', '2019-09-03 15:59:00', '2019-09-03 16:00:00', '2019-09-03 16:01:00', '2019-09-03 16:02:00', '2019-09-03 16:03:00', '2019-09-03 16:04:00', '2019-09-03 16:05:00', '2019-09-03 16:06:00', '2019-09-03 16:07:00', '2019-09-03 16:08:00', '2019-09-03 16:09:00', '2019-09-03 16:10:00', '2019-09-03 16:11:00']
                    }
                ],
                yAxis: [
                    {
                        name: '请求数',
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '请求数',
                        type: 'line',
                        data: [16, 6, 0, 0, 24, 28, 30, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 262, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 28, 0, 32, 68, 32, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            minuteChart.setOption(minuteOption);

            var methodChart = ec.init(document.getElementById('methodChart'), theme);
            methodChart.setOption({
                title: {
                    text: '请求方法统计'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'

                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: ['HEAD', 'GET', 'POST']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center'
                                }
                            }
                        },
                        restore: {show: true,},
                        saveAsImage: {show: true,}
                    }
                },
                calculable: true,
                series: [{
                    name: '方法占比',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: [
                        {
                            value: 1,
                            name: 'HEAD'
                        },
                        {
                            value: 24179,
                            name: 'GET'
                        },
                        {
                            value: 124890,
                            name: 'POST'
                        }
                    ]
                }]
            });

            var statusChart = ec.init(document.getElementById('statusChart'), theme);
            statusChart.setOption({
                title: {
                    text: '状态码统计'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'

                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: [200, 404, 500, 499, 302, 304]
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center'
                                }
                            }
                        },
                        restore: {show: true,},
                        saveAsImage: {show: true,}
                    }
                },
                calculable: true,
                series: [{
                    name: '状态码占比',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: [

                        {
                            value: 144182,
                            name: 200
                        },

                        {
                            value: 3757,
                            name: 404
                        },

                        {
                            value: 782,
                            name: 500
                        },

                        {
                            value: 189,
                            name: 499
                        },

                        {
                            value: 136,
                            name: 302
                        },

                        {
                            value: 24,
                            name: 304
                        },

                    ]
                }]
            });

        }
    );
</script>

</body>

</html>